<template>
  <div>

 <div class="box1">
    <div class="box2"> 
      <div class="box3">
        快捷操作
      </div>
    </div>

  <div>
    <div class="left">
     <div style="margin-top:40px; margin-left:30px">
      <button @click="btn1">销售订单</button>
     </div>
     <div style="margin-top:40px; margin-left:30px">
      <button @click="btn2">车间任务</button>
     </div>
     <div style="margin-top:40px; margin-left:30px">
      <button @click="btn3">车间任务卡</button>
     </div>
    </div>

    <div class="center">
      <div style="margin-top:40px; margin-left:30px">
        <button @click="btn4">生产计划</button>
       </div>
       <div style="margin-top:40px; margin-left:30px">
        <button @click="btn5">物料计划</button>
       </div>
       <div style="margin-top:40px; margin-left:30px">
        <button @click="btn6">采购订单</button>
       </div>
    </div>
    <div class="right">
      <div style="margin-top:40px; margin-left:30px">
        <button @click="btn7">BOM管理</button>
       </div>
       <div style="margin-top:40px; margin-left:30px">
        <button @click="btn8">工艺管理</button>
       </div>
       <div style="margin-top:40px; margin-left:30px">
        <button @click="btn9">领料出库</button>
       </div>
    </div>
  </div>

 </div>


 <div class="box4">
  <div class="box5">
    <div class="box3"> 库存预警</div>
  </div>
 <table border="1" cellspacing="0" width="250" height="250">
   <thead height="55px" style="background-color: #F0F8FF;">
    <th>产品名称</th>
    <th>库存数量</th>
   </thead>
   <tbody>
    <tr>
      <td>温控器</td>
      <td>255</td>
    </tr>
    <tr>
      <td>阀门</td>
      <td>344</td>
    </tr>
    <tr>
      <td>冷冻液</td>
      <td>356</td>
    </tr>
   </tbody>
 </table>
</div>

</div>
</template>

<script>
 export default {
  data(){
    return{
      
    }
  },
  methods: {
    btn1() {
      this.$router.push('/src/views/mes/buyorder/index.vue');
    },
    btn2() {
      this.$router.push('/src/views/mes/worktask/index.vue');
    },
    btn3() {
      this.$router.push('/src/views/mes/taskcard/index.vue');
    },
    btn4() {
      this.$router.push('/src/views/mes/plan/index.vue');
    },
    btn5() {
      this.$router.push('/src/views/mes/mat_plan/index.vue');
    },
    btn6() {
      this.$router.push('/src/views/mes/buyorder/index.vue');
    },
    btn7() {
      this.$router.push('/src/views/mes/BOM/index.vue');
    },
    btn8() {
      this.$router.push('/src/views/mes/craft/index.vue');
    },
    btn9() {
      this.$router.push('/src/views/mes/pick/index.vue');
    }

  },

 }
</script>

<style>
.box1 {
  margin-top: 90px;
  margin-left: 100px;
  background-color: #F0F8FF	;
  width: 460px;
  height: 340px;
  display:inline-block;
  float: left;
}

.box2 {
  background-color: #1E90FF		;
  width: 460px;
  height: 55px;
  
}

.box3 {
  font-size: 25px;
  margin-left: 20px;
  line-height:55px ;

}

.box4 {
  float: right;
margin-top: 120px;
margin-right: 90px;
}

.box5 {
  width: 250;
  height: 55px;
  background-color:#1E90FF ;
}


.table {
  float: right;
  border-style: solid;
}

td {
  text-align: center;
  background-color: #F0F8FF;
}

 button {
  background-color: #B5B5B5;
  border: none;
  width: 85px;
  height: 45px;
} 

 button:hover {
  color: orangered;
  background-color: orange;
 }

.left {
  display: inline-block;
  float: left;
  width: 153px;
  height: 280px;
}

.center {
  float: left;
  width: 153px;
  height: 280px;
}
.right {
  width: 153px;
  float: left;
  height: 280px;
}

</style>